<style lang="scss">
.box {
  height: 100vh;
  background: #f8f6f6;
  margin: 0;
  padding: 0;

}

.confirmap_one {
  width: 100vw;
  position: relative;
  background: #fff;
  margin-top: -13px;

  div {

    width: 3px;
    height: 14px;
    background: red;
    position: absolute;
    left: 6px;
    top: 1px;
    border-radius: 80px;
  }

  p {
    margin-left: 10px;
    font-weight: 600;
    margin-left: 20px;
  }
}

.confirmap_two {
  display: flex;

  margin: 10px;
  border-bottom: 2px solid #f0f0f0;

  p {
    width: 60px;
  }

  span {
    margin-left: 50px;
    line-height: 43px;
  }
}

.confirmap_three {
  position: relative;
  margin: 10px;
  height: 50px;

  p {
    position: absolute;
    right: 15px;
  }

  span {
    color: red;
    margin-left: 5px;
    font-weight: 300;

  }
}

.box_one {
  background: #fff;
}

.box_two {
  background: #fff;

  // border-bottom: 2px solid #f0f0f0;
  .two_confirmap_two {
    display: flex;
    margin: 10px;

    border-bottom: 1.5px solid #f0f0f0;

    p {
      width: 60px;
    }

    span {
      margin-left: 50px;
      line-height: 43px;
    }
  }
}

.foote {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 57px;

  div {
    margin: 5px;

    p {
      height: 5px;
    }

    span {
      color: red;
      font-size: 22px;
    }
  }

  button {
    height: 30px;
    width: 60px;
    border-radius: 15px;
    color: #fff;
    background: red;
    border: none;
    margin-right: 6px;


  }
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}
</style>

<template>
  <div class="box">
    <van-nav-bar title="确认预约" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="box_one">
      <div class="confirmap_one">
        <div></div>
        <p>预约信息</p>
      </div>

      <div class="confirmap_two">
        <p>预约项目</p>
        <span>{{ data.name }}</span>
      </div>
      <div class="confirmap_two">
        <p>预约时间</p>
        <span>2023.{{ data.time_year_now }} ({{ data.type }}:00-{{ data.type + 1 }}:00)</span>
      </div>
      <div class="confirmap_two">
        <p>预约人数</p>
        <span>{{ data.value }}</span>
      </div>
      <div class="confirmap_two">
        <p>发型师</p>
        <span>{{ data.serveName }}</span>
      </div>
      <div class="confirmap_two">
        <p>备注</p>
        <span>{{ data.val ? data.val : '无' }}</span>
      </div>
      <div class="confirmap_three">
        <p>合计:<span>￥{{ data.price }}</span></p>
      </div>
    </div>
    <div class="box_two">
      <div class="two_confirmap_two">
        <p>手机号码</p>
        <input @change="telRule" maxlength="11" v-model="phone" style="border: none;" placeholder="请输入预留人手机号" />

      </div>
      <div class="two_confirmap_two">
        <p>姓名</p>
        <input v-model="rePeople" style="border: none;" maxlength="3" placeholder="请输入预留人姓名" />
      </div>
    </div>
    <div class="foote">
      <div>
        <p>已选择:{{ data.type }}:00-{{ data.type + 1 }}:00</p>
        <span>￥{{ data.price }}</span>
      </div>
      <button @click="jumps()" >
        确认预约
      </button>

    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Toast } from 'vant';
import axios from 'axios';

Vue.use(NavBar);
export default {
  name: '',
  data() {
    return {
      btn: true,
      phone: '',
      rePeople:'',
      code:'',
      reId:'',
      data: {

      }
    }
  },
  mounted() {
    this.data = this.$route.query.data
    console.log(this.data, '过来的数据');

  },
  components: {},
  methods: {
    telRule() {
      // console.log(this.phone, '999');
      let reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.phone)) {
        Toast('手机号格式不正确');
        this.btn = true
      }else{
        // Toast('手机号格式正确');
        this.btn = false
      }
    },
    onClickLeft() {
      Toast('返回');
      this.$router.push({path:'/reservation'})
    },
    async jumps() {
      if(this.btn){
        Toast('请添加手机号')
        return
      }else{
        let res = await axios({
        url: 'http://192.168.20.106:8000/api/subscribe/onlineReservation/reserve',
        method: 'get',
        params: {
          userId: '1',
          serveId: this.data.serverId,
          staffId: this.data.staffId,
          value: this.data.value,
          price: this.data.price,
          phone: this.phone,
          name: this.data.name,
          val: this.data.val,
          reTime: this.data.time_year_now,
          type: this.data.type,
          rePeople:this.rePeople
        }
      })
      this.code=res.data.data.reNum
      this.reId = res.data.data.reId
      // console.log(res);

      this.$router.push({path:'/record',query:{phone:this.phone,rePeople:this.rePeople,data:this.data,code:this.code,reId:this.reId}})
      }
      // console.log(this.data.serverId, '999');
     
      // console.log(res, '确认');
     
    }
  }
}
</script>


